<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/WEB-INF/templates/loginPageLayout.xhtml">

	<ui:define name="title">
		<h:outputText value="DAMATE - #{msg['LoginPage.title']}" />
	</ui:define>

    <ui:define name="login">
        <div id="loginPanel">
            <div class="header">
                <h:graphicImage library="images" name="lock-24.png" />
                <h:outputText value="#{msg['LoginPage.title']}" />
            </div>
            <script type="text/javascript">
                function resetValue(input) {
                    if (input._valueResetted) {
                        return;
                    }
                    input._valueResetted = true;
                    input.value = "";
                    input.style["color"] = '#000000';
                }
            </script>
            <form id="id-login-form" method="POST" action="#{facesContext.externalContext.requestContextPath}/j_spring_security_check">
                <div class="login-fields">
                    <div>
                        <h:outputLabel value="#{msg['LoginPage.inputFields.username']}" />
                        <h:inputText id="j_username" onfocus="resetValue(this)" />
                    </div>
                    <div>
                        <h:outputLabel value="#{msg['LoginPage.inputFields.password']}" />
                        <h:inputSecret id="j_password" onfocus="resetValue(this)" />
                    </div>
                    <div class="remeberMe">
                        <h:selectBooleanCheckbox id="_spring_security_remember_me" />
                        <h:outputText value="#{msg['LoginPage.inputFields.rememberMe']}" />
                    </div>

                    <script type="text/javascript">
                        document.getElementById("j_username").value = "username";
                        document.getElementById("j_password").value = "password";
                    </script>
                </div>
                <div class="login-buttons">
                    <a href="#{facesContext.externalContext.requestContextPath}/registration.xhtml">#{msg['LoginPage.buttons.register']}</a>
                    <span>#{msg['Common.or']}</span>
                    <h:commandButton value="#{msg['LoginPage.buttons.login']}" />
                    <h:commandButton value="#{msg['Common.reset']}" type="reset" />
                </div>
                <div id="errorMessages" style="display: #{param['error'] ? 'block' : 'none'}">
                    <h:outputText value="#{sessionScope['SPRING_SECURITY_LAST_EXCEPTION'].message}" rendered="#{param['error']}"/>
                    <h:outputText value="#{msg['LoginPage.errors.sessionExpired']}" rendered="#{param['sessionExpired']}"/>
                </div>
            </form>
        </div>
    </ui:define>
</ui:composition>